<template>
	<view>
		<view v-if="orderInfo.status == 3 || orderInfo.status == 4" class="card-box" hover-class="hover_class" @click="lookMore">
			<view>
				<view>渝渔速专人配送</view>
				<view>运单号<text>{{ orderInfo.sn }}</text></view>
			</view>
			<image src="../../static/image/moresd.png"></image>
		</view>
		<view class="card-box">
			<view>
				<view>{{orderInfo.addressUsername}}<text>{{orderInfo.addressTelephone}}</text></view>
				<view class="address">地址：{{ orderInfo.address }}</view>
			</view>
		</view>
		<view class="list">
			<view class="clrcles">
				<view v-for="(it, ix) in orderInfo.productList" class="pro-all" :key="ix">
					<image mode="aspectFill" :src="it.product_image"></image>
					<view>
						<view>{{ it.name }}</view>
						<view>{{ it.attr_name }}</view>
						<view class="infosd">
							<view>
								<view>
									<text>￥</text>
									<view>{{it.price}}</view>
								</view>
								<text>￥{{it.market_price || 0}}</text>
							</view>
							<text>x{{it.number}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view>
					<text>优惠券</text>
					<view>{{ orderInfo.couponPrice }}</view>
				</view>
				<view>
					<text>运费</text>
					<view>￥{{orderInfo.deliveryPrice}}</view>
				</view>
				<view>
					<text>订单总价</text>
					<view>￥{{orderInfo.totalPrice}}</view>
				</view>
			<!-- 	<view>
					<text>合并付款</text>
					<view class="price">￥??</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'user'
			},
			orderInfo: {
				type: Object,
				default: () => {productList:[]}
			}
		},
		methods: {
			lookMore() {
				uni.setStorageSync('logistics', JSON.stringify({
					sn: this.orderInfo.sn,
					logistics_list: this.orderInfo.logistics_list
				}))
				uni.navigateTo({
					url: '/managePackage/pages/logistics/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.card-box {
	background: #fff;
	border-radius: 20upx;
	margin-bottom: 30upx;
	box-sizing: border-box;
	padding: 38upx 32upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	>image {
		width: 40upx;
		height: 40upx;
	}
	>view{
		>view:nth-of-type(1) {
			font-size: 28upx;
			color: #000000;
			font-weight: bold;
			>text {
				margin-left: 14upx;
			}
		}
		>view:nth-of-type(2) {
			font-size: 24upx;
			color: #000000;
			margin-top: 30upx;
			>text {
				margin-left: 14upx;
			}
		}
	}
}
.order-info {
	box-sizing: border-box;
	padding: 31upx 25upx 0 25upx;
	border-top: 1px solid #F6F6F6;
	margin-top: 39upx;
	>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		>text {
			font-size: 28upx;
			color: #333333;
		}
		>view {
			font-size: 28upx;
			color: #333333;
		}
	}
	>view:not(:last-child) {
		margin-bottom: 50upx;
	}
	.price {
		color: #CC0000 !important;
	}
}
.pro-all {
	display: flex;
	>image {
		width: 162upx;
		height: 162upx;
		margin-right: 33upx;
		border-radius: 15upx;
	}
	>view {
		flex: 1;
		>view:nth-of-type(1) {
			font-size: 28upx;
			color: #000000;
			font-weight: 500;
			margin-bottom: 22upx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 400upx;
		}
		>view:nth-of-type(2) {
			font-size: 26upx;
			color: #B1B1B1;
		}
		>.infosd {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 45upx;
			flex: 1;
			>text {
				font-size: 28upx;
				color: #000000;
				font-weight: 400;
			}
			>view {
				display: flex;
				align-items: center;
				>text {
					font-size: 24upx;
					color: #969696;
					text-decoration-line: line-through;
				}
				>view {
					display: flex;
					align-items: flex-end;
					>text {
						font-size: 24upx;
						color: #E50000;
						margin-bottom: 3upx;
					}
					>view {
						font-size: 32upx;
						color: #E50000;
					}
				}
			}
		}
	}
}
.list {
	border-bottom: 1px solid #F4F4F4;
	box-sizing: border-box;
	background-color: #fff;
	margin-bottom: 30upx;
	box-sizing: border-box;
	border-radius: 20upx;
	padding: 34upx 0;
	.clrcles {
		box-sizing: border-box;
		padding: 0 28upx;
		>view:not(:last-child) {
			margin-bottom: 25upx;
		}
	}
	.moren-data {
		display: flex;
		align-items: center;
		justify-content: space-around;
		>view {
			display: flex;
			align-items: center;
			flex: 1;
			>view {
				width: 12upx;
				height: 12upx;
				border-radius: 50%;
				background: #D8D8D8;
				margin-right: 16upx;
				flex-shrink: 0;
			}
			>text {
				font-size: 26upx;
				color: #333333;
				line-height: 40upx;
			}
		}
		>text {
			font-size: 22upx;
			color: #999999;
			margin-left: 40upx;
		}
	}
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 22upx;
		>view {
			display: flex;
			align-items: center;
		}
		>view:nth-of-type(1) {
			flex: 1;
			min-width: 0;
			.user-icon {
				display: flex;
				align-items: center;
				>image {
					width: 44upx;
					height: 44upx;
					margin-right: 10upx;
				}
				>text {
					font-size: 30upx;
					color: #333333;
				}
			}
			.account-info {
				flex: 1;
				min-width: 0;
				>view:nth-of-type(1) {
					font-size: 26upx;
					color: #000000;
					margin-bottom: 10upx;
				}
				>view:nth-of-type(2) {
					font-size: 24upx;
					color: #777777;
				}
			}
			>text {
				flex: 1;
				font-size: 30upx;
				color: #333333;
			}
			>image {
				width: 64upx;
				height: 64upx;
				margin-right: 10upx;
				flex-shrink: 0;
			}
		}
	}
}
.address {
	line-height: 33upx;
}
</style>